<template>
  <div id="islider">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in swiperList">
          <img :data-src="item.contentImg" class="swiper-lazy">
          <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
          <div class="slide-container">
            <span class="slide-name">{{item.name}}</span>
            <span class="slide-content">{{item.content | formatSwiperContent}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ISlider from '../assets/js/swiper.min.js'

export default {
  data () {
    return {
      slider: null,
      swiperList: []
    }
  },
  props: [
    'banner'
  ],
  ready () {
    this.loadSwiperData()
  },
  methods: {
    loadSwiperData: function () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findContents')
      .then((data) => {
        this.$set('swiperList', data.data)
        if (this.banner.length === 0) {
          setTimeout(() => {
            this.slider = new ISlider('.swiper-container', {
              loop: true,
              lazyLoading: true,
              autoplayDisableOnInteraction: false,
              autoplay: 5000
            })
          }, 1500)
        }
        else {
          setTimeout(() => {
            this.slider.update()
          }, 1500)
        }
      })
    }
  },
  filters: {
    formatSwiperContent: function (content) {
      return content.replace(/<[^>]+>/g, '')
    }
  },
  watch: {
    banner: {
      handler: function (val, oldVal) {
        this.loadSwiperData()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
@import '../assets/css/swiper.min.css';
.header .swiper-container{height:100%;padding-bottom:0;background-color:rgba(0,0,0,.08);}
.swiper-slide{color:#FFF;}
.slide-container{position:absolute;left:0;bottom:0;width:100%;height:55px;padding:5px 10px;background-color:rgba(0,0,0,.15);}
.slide-container span{display:block;clear:both;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}
#islider {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 65px;
  left: 0;
  padding: 0px 15px;
}
#islider .swiper-container{
  height:100%;
  padding-bottom:0;
  background-color:rgba(0,0,0,.35);
  border-radius:5px;
}
#islider .swiper-container .swiper-wrapper{
  width:100%;
  height:100%;
}
#islider img{
  width:100%;
  height:auto;
}
</style>
